<style>
.btn-trans {
  width: 32px;
  height: 32px;
}
</style>

<template>
  <view>
    <view class="pos-f top-0 w100p z-100">
      <u-status-bar />
      <view class="al-c pa-3">
        <view
          class="bg-white-4 btn-trans bdrs-100 d-center hover-1"
          @click="$navBack"
        >
          <u-icon name="arrow-left" color="#333" size="20px"></u-icon>
        </view>
      </view>
    </view>
    <view v-if="info">
      <q-banner :rows="banners" />

      <view class="pa-3 lh-1">
        <view class="bg-cell pa-3 bdrs-8">
          <view class="d-flex al-end">
            <view class="red-1">
              <span>￥</span>
              <span class="fz-22 fw-b">{{ info.price }}</span>
            </view>
            <view class="del op-4 ml-2 fz-13" v-if="info.price_old"
              >￥{{ info.price_old }}</view
            >
          </view>
          <view class="fw-b fz-17 mt-3">{{ info.name }}</view>
          <view class="fz-13 op-5 mt-3">{{ info.bio || "暂无简介" }}</view>
        </view>

        <view class="bg-cell bdrs-8 mt-3 ov-h">
          <view class="pa-3">
            <view>商品详情</view>
          </view>

          <view v-for="src in info.detail_imgs" :key="src">
            <q-img :src="src" w="100%" mode="widthFix" block></q-img>
          </view>
        </view>
      </view>

      <view style="padding-top: 56px">
        <u-safe-bottom />
      </view>
      <view class="pos-btm pos-f bg-cell">
        <view class="al-c pa-2 gap-3">
          <view class="pa-1 hover-1 pos-r" @click="goCart">
            <u-icon name="shopping-cart" size="30px"></u-icon>
            <view class="pos-a top-0 right-0" v-show="cartNum">
              <u-badge :value="cartNum"></u-badge>
            </view>
          </view>
          <view class="flex-1">
            <u-button type="primary" @click="onCart">加入购物车</u-button>
          </view>
        </view>
        <u-safe-bottom></u-safe-bottom>
      </view>
    </view>

    <q-loading v-else />
  </view>
</template>

<script>
import { mapState, mapGetters } from "vuex";

export default {
  computed: {
    ...mapState(["cartList"]),
    ...mapGetters(["cartNum"]),
    curNum() {
      return this.cartList.find((it) => it.id == this.id)?.num || 0;
    },
    banners() {
      const imgs = [this.info.cover, ...(this.info?.detail_imgs || [])].filter(
        (it) => !!it
      );
      return imgs.map((img) => {
        return { img };
      });
    },
  },
  data() {
    return {
      id: null,
      info: null,
    };
  },
  onLoad({ id }) {
    this.id = id;
    this.getInfo();
  },
  onShow() {
    this.$setState({
      isHome: getCurrentPages().length == 1,
    });
  },
  onUnload() {
    this.$setState({
      isHome: true,
    });
  },
  methods: {
    goCart() {
      this.$navTo("cart/cart-page");
    },
    async onCart() {
      const num = this.curNum + 1;
      this.$store.dispatch("addCart", {
        info: this.info,
        num,
      });
      const msg = num > 1 ? `已加入${num}份` : "已加入购物车";
      await this.$confirm(msg, {
        confirmText: "去结算",
        cancelText: "继续选购",
      });
      this.goCart();
    },
    async getInfo() {
      try {
        const { data } = await uni.$api.get(
          "/data/item/shop_goods?id=" + this.id
        );
        this.info = data;
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>
